<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../../static/bootstrap/css/bootstrap.min.css" />
    <!--<link rel="stylesheet" type="text/css" href="../../../static/sr/srui.css" />-->
    <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
    <link rel="stylesheet" type="text/css" href="../../../lib/bootstrap-table/bootstrap-table.css">
</head>
<body>
<div class="container bs-docs-container">
    <div class="row">
        <!--左侧-->
        <div class="col-md-9" role="main">
            <div class="doc-section">
                <h2 id="overview" class="page-header ">Bootstrap Table</h2>
                <p>基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。</p>
            </div>

            <!--通过html创建table-->
            <div class="doc-section">
                <h3 class="page-header">通过html创建table</h3>
                <table data-toggle="table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Stars</th>
                        <th>Forks</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="tr-id-1" class="tr-class-1" data-title="bootstrap table">
                        <td id="td-id-1" class="td-class-1" data-title="bootstrap table">
                            <a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a>
                        </td>
                        <td data-value="526">526</td>
                        <td data-text="122">122</td>
                        <td data-i18n="Description">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
                        </td>
                    </tr>
                    <tr id="tr-id-2" class="tr-class-2">
                        <td id="td-id-2" class="td-class-2">
                            <a href="https://github.com/wenzhixin/multiple-select">multiple-select</a>
                        </td>
                        <td>288</td>
                        <td>150</td>
                        <td>A jQuery plugin to select multiple elements with checkboxes :)
                        </td>
                    </tr>
                    <tr id="tr-id-3" class="tr-class-3">
                        <td id="td-id-3" class="td-class-3">
                            <a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a>
                        </td>
                        <td>32</td>
                        <td>11</td>
                        <td>Show/hide password plugin for twitter bootstrap.
                        </td>
                    </tr>
                    <tr id="tr-id-4" class="tr-class-4">
                        <td id="td-id-4" class="td-class-4">
                            <a href="https://github.com/wenzhixin/blog">blog</a>
                        </td>
                        <td>13</td>
                        <td>4</td>
                        <td>my blog</td>
                    </tr>
                    <tr id="tr-id-5" class="tr-class-5">
                        <td id="td-id-5" class="td-class-5">
                            <a href="https://github.com/wenzhixin/scutech-redmine">scutech-redmine</a>
                        <td>6</td>
                        <td>3</td>
                        <td>Redmine notification tools for chrome extension.</td>
                    </tr>
                    </tbody>
                </table>

            </div>

            <!--通过data创建table-->
            <div class="doc-section">
                <h3 class="page-header">通过json创建table</h3>
                <table id="table-from-data">
                    <thead>
                    <tr>
                        <th data-field="id">ID</th>
                        <th data-field="name">Item Name</th>
                        <th data-field="price">Item Price</th>
                    </tr>
                    </thead>
                </table>
            </div>


            <!--各式各样的table-->
            <div class="doc-section">
                <h3 class="page-header">综合table</h3>
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <div class="form-group">
                            <span>Offset: </span>
                            <input name="offset" class="form-control w70" type="number" value="0">
                        </div>
                        <div class="form-group">
                            <span>Limit: </span>
                            <input name="limit" class="form-control w70" type="number" value="5">
                        </div>
                        <div class="form-group">
                            <input name="search" class="form-control" type="text" placeholder="Search">
                        </div>
                        <button id="ok" type="submit" class="btn btn-default">OK</button>
                    </div>
                </div>

                <table id="toolbar-table"
                       data-toggle="table"
                       data-height="460"
                       data-url="data/data1.json"
                       data-toolbar="#toolbar"
                       data-click-to-select="true"
                       data-show-refresh="true"
                       data-show-toggle="true"
                       data-show-columns="true"
                       data-query-params="queryParams"
                       data-pagination="true"
                       data-page-size="5"
                       data-page-list="[5,8,10]"
                       data-pagination-first-text="First"
                       data-pagination-pre-text="上一页"
                       data-pagination-next-text="下一页"
                       data-pagination-last-text="Last"
                       data-detail-view="true"
                       data-detail-formatter="detailFormatter"
                    >
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"
                            data-formatter="stateFormatter"></th>
                        <th data-field="id">ID</th>
                        <th data-field="name">Item Name</th>
                        <th data-field="price">Item Price</th>
                    </tr>
                    </thead>
                </table>
            </div>

        </div>
        <div class="col-md-3" role="complementary"></div>
    </div>
</div>



<script type="text/javascript" src="../../../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../lib/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script type="text/javascript" src="../../../static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrapTabelDemo.js"></script>
</body>
</html>